<template>
  <div class="alarm-view">
    <div class="alarm-view-title">
      报警信息
    </div>
    <div class="alarm-view-content" v-if="alarmData.main_info">
      <alarm-info :params="alarmData.main_info" />
    </div>
    <div class="alarm-view-title">
      关联信息
    </div>
    <div class="alarm-view-content" v-if="alarmData.main_info">
      <associated-info :cdCode="alarmData.main_info.cdCode" />
    </div>
    <div class="alarm-view-title">
      关联视频
    </div>
    <div class="alarm-view-content">
      <associated-video :alarmId="globalParams.alarmId" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useAuthStore } from '@/store/auth'
import AlarmInfo from './alarmInfo.vue'
import AssociatedInfo from './associatedInfo.vue'
import AssociatedVideo from './associatedVideo.vue'
import { getAlarmHistory, getAddressBookList } from '@/api/alarm'


onMounted(async () => {
  await getAlarmData()
})
const authStore = useAuthStore()
const { globalParams } = storeToRefs(authStore)

const alarmData = ref({})
const addressBookList = ref([])
async function getAlarmData () {
  const [alarmRes, addressBookRes] = await Promise.all([
    getAlarmHistory(globalParams.value.alarmId),
    getAddressBookList()
  ])
  alarmData.value = alarmRes.data
  addressBookList.value = addressBookRes.data
}
</script>
<style lang="scss" scoped>
.alarm-view {
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: var(--el-border-color);
  }

  .alarm-view-title {
    position: relative;
    padding-left: 8px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1px;
    margin-left: 16px;
    &::before{
      content: "";
      width: 4px;
      height: 16px;
      background-color: var(--el-color-primary);
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .alarm-view-content {
    position: relative;
    padding: 8px 16px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
  }
}
</style>
